//index.js
const app = getApp()
var URL = "http://localhost:8085/";
var call = require("../../utils/ajax.js")
Page({
    data: {
        touxiang:"",
        URL: "http://localhost:8085/",
        cardPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534766809331&di=012cc4ad15d457ffa55c6537503eb84a&imgtype=0&src=http%3A%2F%2Fpicture.5068.com%2Fallimg%2F121120%2F4-1211201G920.jpg',
        headPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png',
        sendName: '文字描述描述文字',
        //宠物图片
        petImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png',
        petImg1: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png",
        //宠物二维码
        QRcode: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png",
        test: "小黑",
        petData: {
            "search_pet_id": "c61fd82d22a34b2bb89e921710310e4e",
            "search_pet_name": "的法撒旦",
            "search_pet_sex": "男孩子",
            "lose_city_area": "撒",
            "lose_county_area": "阿萨",
            "lose_detailed_area": "撒大撒sa",
            "search_pet_category": null,
            "search_pet_varieties": "埃及猫",
            "search_pet_age": "2月25天",
            "search_pet_message": " 范德萨",
            "publisher_phone": "2223131",
            "lose_time": "2019年09月28日 00:34",
            "special_advice": "撒大阿萨阿萨阿萨",
            "file_name": null,
            // "path": URL + "ongjN4h6S8nS2alrYRcklUVCyQXY/searchPet/1177620932169048064/1177620932190019584.png",
            "path": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png",
            // "path1": URL + "ongjN4h6S8nS2alrYRcklUVCyQXY/searchPet/1177620932169048064/1177620932190019584.png"
            "path1": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png"
        }
    },

    onLoad: function(options) {
        let that = this;
        let url = "SearchPet/createPoster/" + options.id;
        // call.getData1(url, function(res) {
        //     // that.drawCanvas(res.date);

        //     // that.drawCanvas(that.data.petData);
        // }, function() {

        // })
        wx.getImageInfo({
            src: 'https://pic.qqtn.com/up/2019-10/15704167881314038.jpg',
            success (res) {
              console.log(res)
              console.log(res.height)
              if(res.errMsg==="getImageInfo:ok"){
                that.setData({
                    touxiang: res.path
                  })
              }

            }
          })
            // wx.downloadFile({
            //     url: "https://pic.qqtn.com/up/2019-10/15704167881314038.jpg", //仅为示例，并非真实的资源
            //     success: function (res) {
            //       // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            //       if (res.statusCode === 200) {
            //         console.log(res, "reererererer")
            //         that.setData({
            //           touxiang: res.tempFilePath
            //         })
            //       }
            //     }
            //   })

            setTimeout(function (){
                that.drawCanvas(that.data.petData)
            }, 2000);

    },
    //画图
    drawCanvas: function(petData) {

        console.log(petData)
        let that = this;
        this.setData({
            cardPath: this.data.cardPath,
            headPath: this.data.touxiang,
            sendName: this.data.touxiang,
            petImg: this.data.touxiang

        });
        let ctx = wx.createCanvasContext('myCanvas');
        let ctxW = this.data.windowWidth;
        let ctxH = 1210;
        //初始化画布背景宽高及内容宽高变量
        var myCanvasWidth
        var myCanvasHeight
            //获取手机屏幕尺寸并给画布宽高赋值
        wx.getSystemInfo({
            success: function(res) {
                console.log(res)
                    // myCanvasWidth = res.windowWidth - 56
                    // myCanvasHeight = res.windowHeight - 100
                myCanvasWidth = res.windowWidth
                myCanvasHeight = res.windowHeight
            },
        })

        // 垂直渐变
        const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
        grd.addColorStop(0, '#ffffff');
        grd.addColorStop(1, '#ffffff');
        ctx.setFillStyle(grd);
        ctx.fillRect(0, 0, ctxW, ctxH);

        //背景
        ctx.drawImage(that.data.touxiang, 5, 0, myCanvasWidth-10, myCanvasHeight-70); //card
        //标题
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(20);
        ctx.setFillStyle('#fff');
        ctx.fillText("寻找 " + petData.search_pet_name, 150, 45, 320);
        //年龄
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        ctx.fillText("年龄：" + petData.search_pet_age, 90, 70, 320);
        //品种
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        ctx.fillText("品种：" + petData.search_pet_varieties, 200, 70, 320);
        //特征
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        var text = petData.search_pet_message; //这是要绘制的文本
        that.drawText(ctx, text, 28, 90, 148, 320);
        //丢失区域
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        ctx.fillText("丢失区域：" + petData.lose_city_area + petData.lose_county_area + petData.lose_detailed_area, 28, 145, 320);
        //联系方式
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        ctx.fillText("联系方式：" + petData.publisher_phone, 28, 185, 320);
        //丢失时间
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        ctx.fillText("丢失时间：" + petData.lose_time, 28, 165, 320);
        //特征
        ctx.setTextAlign('left');
        ctx.setTextBaseline('middle');
        ctx.setFontSize(16);
        ctx.setFillStyle('#fff');
        ctx.fillText("特别叮嘱：", 28, 205, 320);
        var text1 = petData.special_advice; //这是要绘制的文本
        that.drawText(ctx, text1, 28, 220, "", 100);
        ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
        /**/

        //宠物图片1

        ctx.save();
        ctx.beginPath(); //开始绘制
        ctx.rect(165, 200, 180, 180) //边长为为10px的正方形
        ctx.clip(); //剪切
        //  ctx.drawImage(this.data.URL + petData.path, 165, 200, 180, 180); //userHeader  // 推进去图片必须是https
        ctx.drawImage(that.data.headPath, 165, 200, 180, 180); //userHeader  // 推进去图片必须是https  
        ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
        //宠物图片2

        ctx.save();
        ctx.beginPath(); //开始绘制
        ctx.rect(28, 360, 180, 180) //边长为为10px的正方形

        ctx.clip(); //剪切
        // ctx.drawImage(this.data.URL + petData.path, 28, 360, 180, 180); //userHeader  // 推进去图片必须是https
        ctx.drawImage(that.data.touxiang, 28, 360, 180, 180); //userHeader  // 推进去图片必须是https
        ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
        //开始绘制宠物二维码
     
        ctx.save();
        ctx.beginPath(); //开始绘制
        ctx.rect(250, 460, 80, 80) //边长为为10px的正方形

        ctx.clip(); //剪切
        ctx.drawImage(that.data.touxiang, 250, 460, 80, 80); //userHeader  // 推进去图片必须是https
        ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
        /**/

        // ctx.stroke();//增加边框
        ctx.draw();




    },
    //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
        var lineWidth = 0;
        var lastSubStrIndex = 0; //每次开始截取的字符串的索引
        for (let i = 0; i < str.length; i++) {
            lineWidth += ctx.measureText(str[i]).width;
            if (lineWidth > canvasWidth) {
                ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
                initHeight += 16; //16为字体的高度
                lineWidth = 0;
                lastSubStrIndex = i;
                titleHeight += 30;
            }
            if (i == str.length - 1) { //绘制剩余部分
                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
            }
        }
        // 标题border-bottom 线距顶部距离
        titleHeight = titleHeight + 10;
        return titleHeight
    },
    fo: function() {
        wx.showModal({
                title: '提示',
                content: '您输入的shoujihao有误',
            })
            // wx.showToast({
            //   title: '成功',
            // })
    },
    //分享图片
    shareImage: function() {

        this.onShareAppMessage();
    },
    // 保存图片
    saveImage: function(e) {
        wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: function(res) {
                console.log(res)
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success(res) {
                        console.log(res)
                        wx.showToast({
                            title: '图片保存成功',
                            icon: 'success',
                            duration: 2000
                        })
                    },
                    fail(res) {
                        console.log(res)
                        if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                            console.log("用户一开始拒绝了，我们想再次发起授权")
                            console.log('打开设置窗口')
                            wx.openSetting({
                                success(settingdata) {
                                    console.log(settingdata)
                                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                                    } else {
                                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                                    }
                                }
                            })
                        }
                    },
                    complete(res) {
                        console.log(res)
                    }
                })
            }
        })
    },
    onShareAppMessage: function(res) {
        return {
            title: "这个是我分享出来的东西",
            success: function(res) {
                console.log(res, "转发成功")
            },
            fail: function(res) {
                console.log(res, "转发失败")
            }
        }
    }
})